<template>
  <div class="search">
    <input
      ref="count"
      v-model='inputValue'
      @keyup.enter="searchEnterFun"
      placeholder="搜索"
      maxlength="50"
    >
  </div>
</template>
<script>

import { mapMutations } from 'vuex'

export default {
  inject: ['reload'],
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    searchEnterFun () {
      if (this.inputValue !== '') {
        if (this.$route.path === '/search/detail') {
          this.reload()
        } else {
          this.$router.push({ path: '/search/detail' })
        }
      }
      this.storeSearchValue(this.inputValue)
      this.inputValue = ''
    },
    ...mapMutations({
      storeSearchValue: 'SET_SEARCH_VALUE'
    })
  }
}
</script>

<style lang="stylus" rel="stylus" scoped>
.search
  >input
    background #36a0f6
    border-radius 3px
    border none
    outline none
    height 38px
    width 300px
    padding 5px 20px
    font-size 14px
    color #FFFFFF
    &::-webkit-input-placeholder
      color #B1DBFA
    &:-moz-placeholder
      color #B1DBFA
    &::-moz-placeholder
      color #B1DBFA
    &:-ms-input-placeholder
      color #B1DBFA
</style>
